<template>
  <div class="color">
    <div class="content gwgk">
      <div class="right xwzx">
        <div class="inner">
          <div v-if="this.$router.history.current.query.orderId==1" class="title">
            <p>活动预告</p>
          </div>
          <div v-if="this.$router.history.current.query.orderId==2" class="title">
            <p>文博课堂</p>
          </div>
          <div v-if="this.$router.history.current.query.orderId==3" class="title">
            <p>文博讲座</p>
          </div>
          <div v-if="this.$router.history.current.query.orderId==4" class="title">
            <p>青少年活动</p>
          </div>
          <div class="title_top">
            <p class="xwzx_title">{{message.name}}</p>
            <span
              style="font-size:14px;margin-bottom:20px;"
            >编辑:&nbsp;&nbsp;&nbsp;发布时间:{{message.date}}</span>
            <!-- <span class="xwzx_second_title" v-html="message.metadata[0].value"></span> -->
          </div>
          <div v-html="message.metadata[0].value"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { replaceImg, replaceA } from "../../api/replace";
export default {
  data() {
    return {
      message: { metadata: [{ value: "" }] },
    };
  },

  mounted() {
    this.lookdetail(this.$router.history.current.query.id);
  },

  methods: {
    lookdetail(id) {
      this.$api
        .get(`${this.zs}/get/ziyuanku/data?paraId=36&itemId=${id}`)
        .then((res) => {
          this.message = res.data;
          let data = res.data;
          var pic = data.metadata[0].value.replace(/\\/g, "");

          var newPic = replaceImg(pic);

          var a = replaceA(newPic);
          data.metadata[0].value = a;
          this.message = data;
        });
    },
  },
};
</script>
<style scoped>
.color {
  color: #4e4b4b;
}
.ljbm_bg {
  background: url("../../assets/image/ljbm.png") no-repeat;
  width: 375px;
  height: 60px;
  text-align: center;
  margin: auto;
  line-height: 60px;
  cursor: pointer;
  margin-bottom: 80px;
}
.ljbm_bg p {
  color: white;
  font-size: 24px;
}
.gwgk.content {
  display: flex;
  justify-content: space-between;

  max-width: 1200px;

  margin: auto;
  line-height: 40px;

  box-sizing: border-box;
  padding-bottom: 200px;
}
.gwgk .title {
  font-size: 24px;
  border-bottom: 2px solid rgb(107, 128, 173);
  color: rgb(107, 128, 173);
  margin-bottom: 50px;
}
.title > p {
  margin-bottom: 10px;
}
.gwgk li {
  list-style: none;
}
.gwgk ul,
li,
p {
  padding: 0px;
  margin: 0px;
}

.gwgk .right {
  width: 980px;
  padding: 0 30px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.gwgk .blue {
  color: rgb(25, 67, 119);
}
.zs_k {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.zs_title {
  font-weight: bold;
}
.zs_content {
  font-size: 16px;
}
.right .inner .more {
  color: white;
  background: rgb(78, 105, 161);
  width: 200px;
  height: 40px;
  border-radius: 5px;
  text-align: center;
  font-size: 16px;
}
.right .inner {
  padding-top: 5px;
  padding-bottom: 20px;
}
.right .inner .main_content {
  display: flex;
  padding: 20px;
  justify-content: space-between;
}
.right .inner .second_content li {
  display: flex;
  padding: 20px;
  font-size: 24px;
  box-sizing: border-box;
  justify-content: space-between;
  border-top: 1px solid rgb(216, 216, 216);
  color: black;
}

/*馆务公开 新闻咨询 */
.gwgk span {
  display: block;
}
.title_top {
  text-align: center;
}
.xwzx_title {
  color: #060606;
  font-size: 24px;
  margin-top: 20px;
}
.xwzx_second_title {
  font-size: 16px;
  color: #3e3e3e;
  margin-bottom: 10px;
}
.ziti {
  font-size: 16px;
  color: #666666;
}
</style>